<template>
    <div class="mt-10 flex justify-center pagination-right">
        <el-pagination :current-page="pageNum" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
        :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>
</template>

<script setup>
import { ref, computed, defineEmits } from 'vue';

// 对外暴露属性
const props = defineProps({
    pageNum: {
        type: [Number, String],  // 允许Number或String类型的值
        default: () => 1
    },
    pageSize:  {
        type: [Number, String],  // 允许Number或String类型的值
        default: () => 10
    },
    total: {
        type: [Number, String],  // 允许Number或String类型的值
        default: () => 0
    }
})


const handleSizeChange = (val) => {
    emit('pagination',{pageNum:pageNum.value,pageSize:val})
}

const handleCurrentChange = (val) =>{
    emit('pagination',{pageNum:val,pageSize:pageSize.value})
}

const emit = defineEmits(['update:pageSize', 'update:pageNum', 'pagination'])

const pageSize = computed({
  get: () => props.pageSize,
  set: (val) => {
    emit('update:pageSize', val)
  }
})

const pageNum = computed({
  get: () => props.pageNum,
  set: (val) => {
    emit('update:pageNum', val)
  }
})

</script>

<style>
.pagination-right {
    justify-content: right !important;
}
</style>